import React,{Component} from 'react';
import styles from './privilege.scss';
import CSSModules from 'react-css-modules';
import {Navgaitor,Banner} from '../../../components';
import axios from 'axios';




class Privilege extends Component {
    state={
        newmovielist:[],
        hotmovielist:[]
    }

    
    componentDidMount(){
        var url1=`http://47.92.98.104:8080/zhuiying/findmovie1`;
        var url2=`http://47.92.98.104:8080/zhuiying/findmovie2`;
        
            axios({
                url:url1,
                method:'get'
            }).then(res=>{
                console.log(res)
                this.setState({
                    newmovielist:res.data
                })
            }); 
            axios({
                url:url2,
                method:'get'
            }).then(res=>{
                console.log(res)
                this.setState({
                    hotmovielist:res.data
                })
            }); 
            
    }

    showNewMovieLists(){
        var jsx=[];
        if(this.state.newmovielist!=''){
            for(var i=0;i<5;i++){
                jsx.push(
                    <li key={this.state.newmovielist[i].id}>
                        <a>
                            <img src={this.state.newmovielist[i].cimage} styleName="item-image"/>
                            <h3 styleName="item-h3">{this.state.newmovielist[i].cname}</h3>
                        </a>
                    </li>
                )
            }
        }
        return jsx;
    }
    showHotMovieLists(){
        var jsx=[];
        if(this.state.hotmovielist!=''){
            for(var i=0;i<5;i++){
                jsx.push(
                    <li key={this.state.hotmovielist[i+1].id}>
                        <a>
                            <img src={this.state.hotmovielist[i+1].cimage} styleName="item-image"/>
                            <h3 styleName="item-h3">{this.state.hotmovielist[i+1].cname}</h3>
                        </a>
                    </li>
                )
            }
        }
        return jsx;
    }
    render(){
        return <div styleName="vip-privilege">
        <Banner/>
        <Navgaitor/>
        <div styleName="privilege-content">
            
            <div className="wrapper">
                
                <div styleName="privilege">
                    <h1 styleName="p-title">会员特权：你值得拥有</h1>
                    <ul className="clearfix">
                        <li>
                            <div>
                                <img src="/images/vip/ico1_privilege.gif"/>
                                <span>新片首发</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="/images/vip/ico2_privilege.gif"/>
                                <span>独家影片</span>
                            </div>
                        </li>
                        <li styleName="no-right">
                            <div>
                                <img src="/images/vip/ico3_privilege.gif"/>
                                <span>画质更高清</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="/images/vip/ico4_privilege.gif"/>
                                <span>更好的播放体验，电影院的观影感受</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="/images/vip/ico5_privilege.gif"/>
                                <span>无广告</span>
                            </div>
                        </li>
                        <li styleName="no-right">
                            <div>
                                <img src="/images/vip/ico6_privilege.gif"/>
                                <span>会员尊享标识</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="/images/vip/ico7_privilege.gif"/>
                                <span>分类体验服务更好</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="/images/vip/ico8_privilege.gif"/>
                                <span>会员加速</span>
                            </div>
                        </li>
                        <li styleName="no-right">
                            <div>
                                <img src="/images/vip/ico9_privilege.gif"/>
                                <span>观影团优先参加</span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div styleName=" p-movie">
                    <h1 styleName="p-title">新片速递</h1>
                    <ul styleName="p-movie-list" className="clearfix">
                        {this.showNewMovieLists()}
                    </ul>
                </div>

                <div styleName="p-movie">
                    <h1 styleName="p-title">热播大片</h1>
                    <ul styleName="p-movie-list" className="clearfix">
                        {this.showHotMovieLists()}
                    </ul>
                </div>
        
            </div>
                <div styleName="be-members">
                    <div styleName="wrapper">
                    享受独家电影，加入我们，会员免费观看。
                        <a href="#" target="_blank" styleName="b-btn"></a>
                </div>
        </div>
        </div>
        

        </div>
    }
}

export default CSSModules(Privilege, styles,{allowMultiple:true});
